<template>
    <div>
        <h1>姓名：{{ person.name }}</h1>
        <h1>年龄：{{ person.age }}</h1>
        <hr>
        <h1>ref姓名：{{ name }}</h1>
    </div>
</template>
<script setup>
    import { ref,reactive, toRef } from 'vue'
    const person = reactive({
        name: 'John',
        age: 30
    })
    const name = toRef(person, 'name')

    setTimeout(() => {
        person.name = 'Mike'
    }, 3000)
</script>

<style>

</style>